<template>
	<div id="commentInput">
		<!-- <div @click="clear">aa</div> -->
		<textarea placeholder="请写下评论" v-model="commentInfo"></textarea>
		<div id="send">
			<div id="sendBtn" @click="sendComment">发送</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				commentInfo: '',
				userID: '',
				newComment: {}
			}
		},
		props: ['info','commentSum'],
		mounted() {
			this.userID = this.$storage.get('user').id
		},
		methods: {
			// clear(){
			// 	this.$axios({
			// 		url: this.ip + '/postInfoChange',
			// 		method: 'post',
			// 		data: {
			// 			postID: this.$props.info,
			// 			type: 'like',
			// 			value: 0 
			// 		}
			// 	}).then(res => {
			// 		console.log(res)
			// 	})
			// },
			sendComment() {
				this.$axios({
					url: this.ip + '/postCommentUpload',
					method: 'post',
					data: {
						postID: this.$props.info,
						userID: this.$storage.get('user').id,
						text: this.commentInfo
					}
				}).then(res => {
					console.log(res.data)
					this.newComment = this.commentInfo
					this.$emit('newComment')
					this.commentInfo = ''
					// 更改评论数量
					this.$axios({
						url: this.ip + '/postInfoChange',
						method: 'post',
						data: {
							postID: this.$props.info,
							type: 'comment',
							value: this.$props.commentSum + 1 
						}
					}).then(res => {
						console.log(res)
					})
				})
			}
		}
	}
</script>

<style>
	#commentInput {
		width: 100%;
		margin-top: 20px;
	}

	#commentInput textarea {
		width: calc(100% - 32px - 28px);
		height: 90px;
		border-radius: 8px;
		resize: none;
		margin: 0 16px;
		padding: 10px 14px;
		background-color: #EEEEEE;
		font-size: 15px;
		border: none;
	}

	#commentInput #send {
		width: calc(100% - 52px);
		margin: 5px 26px 20px;
		display: flex;
		justify-content: flex-end;
	}

	#commentInput #send #sendBtn {
		height: 24px;
		line-height: 24px;
		width: 60px;
		text-align: center;
		color: #996699;
		border: 1px solid #996699;
		border-radius: 12px;
		font-size: 15px;
		cursor: pointer;
		user-select: none;
		transition: all .3s;
	}

	#commentInput #send #sendBtn:hover {
		background-color: #996699;
		color: white;
	}

	#commentInput textarea:focus {
		outline: none;
	}
</style>
